<template>
  <div>
    <div class="manage-title">
      <span>账号管理</span>
    </div>
    <div class="box__content">
      <div class="list__item">
        <p>
          <svg-icon icon-class="phone1" class="fs20 mr10 color-primary" />
          <span class="list__label">手机号</span>
          <span class="list__value">{{
            userInfo.PhoneNumber
              ? userInfo.PhoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
              : "--"
          }}</span>
        </p>
        <el-button @click="handlePhoneBtn()">
          {{ userInfo.PhoneNumber ? "更换" : "绑定" }}
        </el-button>
      </div>
      <div class="list__item">
        <p>
          <svg-icon icon-class="wechat" class="fs20 mr10" color="#21BB21" />
          <span class="list__label">微信</span
          ><span class="list__value">{{
            userInfo.wx_nick ? userInfo.wx_nick : userInfo.HasBindWx ? "已绑定" : "--"
          }}</span>
        </p>
        <el-button
          v-if="hasLogin"
          :disabled="isDisabledWx"
          @click="handleBindWechat"
        >
          {{ userInfo.HasBindWx ? "解绑" : "绑定" }}
        </el-button>
      </div>
      <div class="list__item">
        <p>
          <svg-icon icon-class="lock" class="fs20 mr10 color-primary" />
          <span class="list__label">登录密码</span>
          <span class="list__value">{{
            userInfo.HasSetPwd ? "******" : "--"
          }}</span>
        </p>
        <el-button
          v-if="hasLogin"
          :disabled="isDisabledPwd"
          @click="handleUpdatePassword"
        >
          {{ userInfo.HasSetPwd ? "更新密码" : "设置密码" }}
        </el-button>
      </div>
    </div>
  </div>

  <bind-phone ref="refBindPhone" />
  <bind-wechat ref="refBindWechat" />
  <setting-pwd ref="refSettingPwd" />
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { userAppStore } from "@/stores/user";
import { computed, ref } from "vue";
import BindPhone, { type BindPhoneApi } from "./bind-phone.vue";
import BindWechat, { type BindWechatApi } from "./bind-wechat.vue";
import SettingPwd, { type SettingPwdApi } from "./setting-pwd.vue";
import { oath2Unbind } from "@/api/login";
import PsMessage from "@/components/message/index";
import PsMessageBox from "@/components/message-box/index";

const _userAppStore_ = userAppStore();
const { hasLogin, userInfo } = storeToRefs(_userAppStore_);
const refBindPhone = ref<BindPhoneApi>();
const refBindWechat = ref<BindWechatApi>();
const refSettingPwd = ref<SettingPwdApi>();
const isDisabledWx = computed(
  () => userInfo.value.HasBindWx && userInfo.value.PhoneNumber === ""
);
const isDisabledPwd = computed(() => userInfo.value.PhoneNumber === "");

const handlePhoneBtn = () => {
  refBindPhone.value?.open(userInfo.value.PhoneNumber ? "change" : "bind");
};

const handleBindWechat = () => {
  if (userInfo.value.HasBindWx) {
    handleUnbindWechat();
    return;
  }
  refBindWechat.value?.open();
};

const handleUpdatePassword = () => {
  refSettingPwd.value?.open();
};

const handleUnbindWechat = () => {
  PsMessageBox.confirm("确定要解绑微信吗？", "解绑微信", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    callback: async (action: string) => {
      if (action === "confirm") {
        await oath2Unbind({ type: "wx" });
        PsMessage("解绑成功");
        _userAppStore_.getUserInfo();
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.box__content {
  padding-top: 14px;
}
.list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 10px;
  height: 32px;
  .el-button {
    min-width: 96px;
    height: var(--el-button-size);
    --el-button-size: 34px;
    --el-button-bg-color: #e6e6ec;
    --el-button-border-color: var(--el-button-bg-color);
    --el-button-text-color: var(--el-text-color-primary);
    --el-button-disabled-bg-color: var(--el-color-info-light-8);
    --el-button-disabled-border-color: var(--el-button-disabled-bg-color);
    --el-button-disabled-text-color: var(--el-text-color-disabled);
  }
  p {
    display: flex;
    align-items: center;
  }
}
.list__label {
  width: 80px;
  margin-right: 40px;
}
</style>
